<template>
	<div style="padding:0 40px 50px;">
		<div style="text-align: right;">
			<el-button type="primary" size="small" @click="addSalesman()">{{$t('button.NewSalesman')}}</el-button>
			<!--<el-button type="primary" size="small" @click='Jump()'>{{$t('button.Return')}}</el-button>-->
		</div>
		<div class="table-border">
			<!--业务员信息-->
			<el-table :data="salesmanData" style="width: 100%;" height=400>
				<el-table-column type="index" fixed :label="$t('index.Number')" width="70">
				</el-table-column>
				<el-table-column prop="salesmanNumber" :label="$t('agent.BDStaffNo')" width="120">
				</el-table-column>
				<el-table-column prop="salesmanName" :label="$t('salesman.Name')" width="120">
				</el-table-column>
				<el-table-column v-if="this.companyId === '2' ? false : true" prop="legalPersonIdNumber" :label="$t('salesman.ID')" width="150">
				</el-table-column>
				<el-table-column prop="phone" :label="$t('mec.Phone')" width="150">
				</el-table-column>
				<el-table-column prop="email" :label="$t('mec.Email')" width="150">
				</el-table-column>
				<el-table-column prop="addDate" :label="$t('mec.CreationTime')" width="200">
				</el-table-column>
				<el-table-column prop="state" :label="$t('salesman.Status')" width="120" :formatter="judgeState">
				</el-table-column>
				<el-table-column :label="$t('index.Operation')" width="200">
					<template scope="scope">
						<el-button type="text" class="blue-btn mini-btn" @click='modifySalesmanData(scope.row)'>{{$t('button.Modify')}}</el-button>
						<el-button type="text" v-if='scope.row.enabled === false' class="blue-btn mini-btn" @click='stopOrStart(scope.row.enabled,scope.row.id,scope.row.salesmanNumber)'>{{$t('button.Enabled')}}</el-button>
						<el-button type="text" v-if='scope.row.enabled === true' class="blue-btn mini-btn" @click='stopOrStart(scope.row.enabled,scope.row.id,scope.row.salesmanNumber)'>{{$t('button.Suspended')}}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination-container">
    			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="searchSalesmanData.page" :page-sizes="[10,20,30,50]" :page-size="searchSalesmanData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
  			</div>
  			<!--澳洲新增业务员-->
			<el-dialog :title="$t('salesman.NewBDStaff')" :visible.sync="dialogFormVisible" v-if="this.companyId === '2' ? true : false">
				<el-form :model="addForm" :rules="AuRules" ref="addForm">
					<el-form-item :label="$t('salesman.Name')" label-width="100px" prop="salesmanName">
						<el-input v-model="addForm.salesmanName" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item :label="$t('agent.BDStaffNo')" label-width="100px" prop="salesmanNumber">
						<el-input v-model="addForm.salesmanNumber" auto-complete="off" @blur='validateNum(addForm)'></el-input>
					</el-form-item>
					<el-form-item :label="$t('mec.Phone')" label-width="100px" prop="phone">
						<el-input v-model="addForm.phone" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item :label="$t('mec.Email')" label-width="100px" prop="email">
						<el-input v-model="addForm.email" auto-complete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="dialogFormVisible = false">{{$t('button.Cancel')}}</el-button>
					<el-button type="primary" @click="submitForm('Au')">{{$t('button.OK')}}</el-button>
				</div>
			</el-dialog>
			<!--香港新增业务员-->
			<el-dialog :title="$t('salesman.NewBDStaff')" :visible.sync="dialogFormVisible" v-else>
				<el-form :model="addForm" :rules="HKRules" ref="addForm">
					<el-form-item :label="$t('salesman.Name')" label-width="100px" prop="salesmanName">
						<el-input v-model="addForm.salesmanName" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item :label="$t('agent.BDStaffNo')" label-width="100px" prop="salesmanNumber">
						<el-input v-model="addForm.salesmanNumber" auto-complete="off" @blur='validateNum(addForm)'></el-input>
					</el-form-item>
					<el-form-item :label="$t('salesman.ID')" label-width="100px" prop="legalPersonIdNumber">
						<el-input v-model="addForm.legalPersonIdNumber" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item :label="$t('mec.Phone')" label-width="100px" prop="phone">
						<el-input v-model="addForm.phone" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item :label="$t('mec.Email')" label-width="100px" prop="email">
						<el-input v-model="addForm.email" auto-complete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="dialogFormVisible = false">{{$t('button.Cancel')}}</el-button>
					<el-button type="primary" @click="submitForm('HK')">{{$t('button.OK')}}</el-button>
				</div>
			</el-dialog>
			
			<!--澳洲修改业务员-->
			<el-dialog :title="$t('salesman.ModifyTheSalesmanInformation')" :visible.sync="dialogModifyFormVisible" :before-close="handleClose" v-if="this.companyId === '2' ? true : false">
				<el-form :model="modifyForm" :rules="AuRules" ref="modifyForm">
					<el-form-item :label="$t('salesman.Name')" label-width="100px" prop="salesmanName">
						<el-input v-model="modifyForm.salesmanName" auto-complete="off" :disabled=true></el-input>
					</el-form-item>
					<el-form-item :label="$t('agent.BDStaffNo')" label-width="100px" prop="salesmanNumber">
						<el-input v-model="modifyForm.salesmanNumber" auto-complete="off" :disabled=true></el-input>
					</el-form-item>					
					<el-form-item :label="$t('mec.Phone')" label-width="100px" prop="phone">
						<el-input v-model="modifyForm.phone" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item :label="$t('mec.Email')" label-width="100px" prop="email">
						<el-input v-model="modifyForm.email" auto-complete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="handleClose">{{$t('button.Cancel')}}</el-button>
					<el-button type="primary" @click="modifyFormData('Au')">{{$t('button.Modify')}}</el-button>
				</div>
			</el-dialog>
			<!--香港修改业务员-->
			<el-dialog :title="$t('salesman.ModifyTheSalesmanInformation')" :visible.sync="dialogModifyFormVisible" :before-close="handleClose"  v-else>
				<el-form :model="modifyForm" :rules="HKRules" ref="modifyForm">
					<el-form-item :label="$t('salesman.Name')" label-width="100px" prop="salesmanName">
						<el-input v-model="modifyForm.salesmanName" auto-complete="off" :disabled=true></el-input>
					</el-form-item>
					<el-form-item :label="$t('agent.BDStaffNo')" label-width="100px" prop="salesmanNumber">
						<el-input v-model="modifyForm.salesmanNumber" auto-complete="off" :disabled=true></el-input>
					</el-form-item>
					<el-form-item :label="$t('salesman.ID')" label-width="100px" prop="legalPersonIdNumber">
						<el-input v-model="modifyForm.legalPersonIdNumber" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item :label="$t('mec.Phone')" label-width="100px" prop="phone">
						<el-input v-model="modifyForm.phone" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item :label="$t('mec.Email')" label-width="100px" prop="email">
						<el-input v-model="modifyForm.email" auto-complete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="handleClose">{{$t('button.Cancel')}}</el-button>
					<el-button type="primary" @click="modifyFormData('HK')">{{$t('button.Modify')}}</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import { salesmanList,salesmanAdd,validateSalesmanNum,modifySalesman } from 'api/salesman/index';
	export default {
		name: 'salesmanManage',
		data() {
			return {
				dialogModifyFormVisible:false,
				dialogFormVisible:false,
				res: [], //分页 数据总条数
				salesmanData:[],
				nullObj:{},
				distributorId:localStorage.getItem('distributorId'),
				companyId:localStorage.getItem('companyId'),
				searchSalesmanData: { //查询参数
					page: 1,
					pageSize: 10,
					distributorId:localStorage.getItem('distributorId')
				},
				addForm:{
					salesmanName:undefined,
					salesmanNumber:undefined,
					legalPersonIdNumber:undefined,
					phone:undefined,
					email:undefined,
				},
				modifyForm:{
					salesmanName:undefined,
					salesmanNumber:undefined,
					legalPersonIdNumber:undefined,
					phone:undefined,
					email:undefined,
				},
				HKRules: {
			        salesmanName: [
			            { required: true, message: this.$t('hint.PleaseEnterName'), trigger: 'blur' },
			            { min: 0, max: 20, message: this.$t('hint.LengthIsMax25Characters'), trigger: 'blur' }
			        ],
			        salesmanNumber: [
			            { required: true, message: this.$t('hint.PleaseEnterBDStaffNumber'), trigger: 'blur' },
			            { min: 0, max: 10, message:this.$t('hint.LengthIsMax10Characters'), trigger: 'blur' }
			        ],
			        legalPersonIdNumber: [
			            { required: true, message: this.$t('hint.PleaseEnterIDNumber'), trigger: 'blur' },
			            { min: 0, max: 20, message: this.$t('hint.LengthIsMax20Characters'), trigger: 'blur' }
			        ],
			        phone: [
			            { required: true, message: this.$t('hint.PleaseEnterPhoneNumber'), trigger: 'blur' },
			            { min: 0, max: 11, message:this.$t('hint.LengthIsMax11Characters'), trigger: 'blur' }
			        ],
			  	},
			  	AuRules: {
			        salesmanName: [
			            { required: true, message: this.$t('hint.PleaseEnterName'), trigger: 'blur' },
			            { min: 0, max: 20, message: this.$t('hint.LengthIsMax25Characters'), trigger: 'blur' }
			        ],
			        salesmanNumber: [
			            { required: true, message: this.$t('hint.PleaseEnterBDStaffNumber'), trigger: 'blur' },
			            { min: 0, max: 10, message:this.$t('hint.LengthIsMax10Characters'), trigger: 'blur' }
			        ],
			        email: [
			            { required: true, message: this.$t('hint.PleaseEnterEmail'), trigger: 'blur' },
			            { min: 0, max: 20, message: this.$t('hint.LengthIsMax50Characters'), trigger: 'blur' }
			        ],
			  	},
			}
		},
		created() {
			this.getSalesmanList(this.searchSalesmanData);
		},
		methods: {
			//格式化业务员当前状态
			judgeState(row){
				let state = row.state;
				return state = state === '1' ? this.$t('button.Suspended') : this.$t('button.Enabled');
			},
			//查询业务员列表
			getSalesmanList(data){
				salesmanList(data).then(res=>{
					this.salesmanData = res.value.list;
					this.res = res.value;
				})
			},
			//停用启用业务员
			stopOrStart(enabled,id,salesmanNumber){
				const salesmanInfo = enabled === false ? this.$t('button.Enabled') : this.$t('button.Suspended');
				this.nullObj.enabled = !enabled;
				this.nullObj.id = id;
				this.nullObj.distributorId = this.distributorId;
				this.nullObj.salesmanNumber = salesmanNumber;
				this.$msgbox({
					title:this.$t("hint.Alert"),
					message:this.$t('hint.SureTo')+salesmanInfo+this.$t('salesman.theSalesman'),
					showCancelButton: true,
			        confirmButtonText: this.$t('button.OK'),
			        cancelButtonText: this.$t('button.Cancel'),
				}).then(() => {
		          	modifySalesman(this.nullObj).then(res=>{
		          		if(res.code === 0 ){
		          			this.dialogModifyFormVisible = false;
		          			this.$notify({
					            title: this.$t('hint.Success'),
					            message: salesmanInfo + this.$t('hint.Success1'),
					            type: 'success',
					            duration: 2000
				         	});
							this.getSalesmanList(this.searchSalesmanData);
		          		}else{
		          			this.$notify({
					            title: this.$t('hint.Fail'),
					            message: salesmanInfo + this.$t('hint.Fail1'),
					            type: 'error',
					            duration: 2000
				         	});
		          		}
		          	})
			    });
			},
			//验证业务员编号
			validateNum(data){
				validateSalesmanNum(data.salesmanNumber).then(res=>{
					if(res.code === 0){
						this.$message(this.$t('hint.BDStaffNumberIsValid'));
					}else{
						this.$message.error(this.$t('hint.BDStaffNumberExistsPleaseReEnter'));
					}
				})
			},
			//新增业务员信息
			submitForm(region){
				this.addForm.distributorId = this.distributorId;
				this.addForm.companyId = this.companyId;
				if(region === 'Au'){
					this.addForm.legalPersonIdNumber = null;
					if( this.addForm.salesmanName==='' || this.addForm.salesmanName===undefined  || this.addForm.salesmanNumber==='' || this.addForm.salesmanNumber===undefined || this.addForm.email==='' || this.addForm.email===undefined ){
						this.$message(this.$t('hint.MandatoryFieldsAreNotFilledIn'));
						return false;
					}else{
						this.AddSalesman();
					}
				}
				if(region === 'HK'){
					// console.log(this.addForm);
					if( this.addForm.salesmanName==='' || this.addForm.salesmanName===undefined  || this.addForm.salesmanNumber==='' || this.addForm.salesmanNumber===undefined || this.addForm.legalPersonIdNumber==='' || this.addForm.legalPersonIdNumber===undefined || this.addForm.phone==='' || this.addForm.phone===undefined ){
						this.$message(this.$t('hint.MandatoryFieldsAreNotFilledIn'));
						return false;
					}else{
						this.AddSalesman();
					}
				}
				
			},
			AddSalesman(){
				salesmanAdd(this.addForm).then(res=>{
//	            	console.log(res);
	            	if(res.code === 0){
	            		this.$notify({
				            title: this.$t('hint.Success'),
				            message: this.$t('hint.BDRecordCreated'),
				            type: 'success',
				            duration: 2000
			         	});
			         	this.dialogFormVisible = false;
						this.getSalesmanList(this.searchSalesmanData);
	            	}else{
	            		this.$notify({
				            title:  this.$t('hint.Fail'),
				            message: this.$t('hint.BDCreateFailed'),
				            type: 'error',
				            duration: 2000
			         	});
			         	this.dialogFormVisible = false;
	            	}
	            })
			},
			modifySalesmanData(data) {
				$.extend(this.modifyForm, data);
				//				this.modifyForm = data;
				this.dialogModifyFormVisible = true;
			},
			//新增业务员按钮
			addSalesman(){
//				console.log(this.addForm);
				this.dialogFormVisible = true;
				this.addForm = {};
			},
			//修改业务员信息
			modifyFormData(region){
				if(region === 'Au'){
					this.addForm.legalPersonIdNumber = null;
				}
				if(region === 'HK'){
					this.addForm.email = this.addForm.email === '' ?  null : this.addForm.email;
				}
				this.$msgbox({
					title:this.$t("hint.Alert"),
					message: this.$t('hint.SureToChangeInfoOfTheSalesman'),
					showClose:false,
		        	showCancelButton: true,
			        confirmButtonText: this.$t('button.OK'),
			        cancelButtonText: this.$t('button.Cancel'),
			   }).then(() => {
			   		this.modifyForm.distributorId = this.distributorId;
		          	modifySalesman(this.modifyForm).then(res=>{
		          		if(res.code === 0 ){
		          			this.dialogModifyFormVisible = false;
		          			this.$notify({
					            title: this.$t('hint.Success'),
					            message: this.$t('hint.SuccessfullyModified'),
					            type: 'success',
					            duration: 2000
				         	});
							this.getSalesmanList(this.searchSalesmanData);
		          		}else{
		          			this.$notify({
					            title: this.$t('hint.Fail'),
					            message: this.$t('hint.FailToEdit'),
					            type: 'error',
					            duration: 2000
				         	});
		          		}
		          	})
			    });
			},
			handleClose(){
				this.dialogModifyFormVisible = false;
			},
			//pageSize 改变时会触发
			handleSizeChange(val) {
				this.searchSalesmanData.pageSize = val;
				this.getSalesmanList(this.searchSalesmanData);
			},
			//currentPage 改变时会触发
			handleCurrentChange(val) {
				this.searchSalesmanData.page = val;
				this.getSalesmanList(this.searchSalesmanData);
			}
		}
	}
</script>

<style>

</style>